<template>
  <el-collapse model-value="first">
    <el-collapse-item name="first" >
      <template #title>
        <SvgIcon name="setting"/>常规
      </template>
      <el-form :model="data" label-position="left" label-width="80px">
        <el-form-item label="名称:" prop="text">
          <el-input v-model="data.text"/>
        </el-form-item>
        <el-form-item label="描述:" prop="text">
          <el-input
              v-model="data.properties.description"
              :rows="2"
              type="textarea"
          />
        </el-form-item>
      </el-form>
    </el-collapse-item>
    <el-collapse-item name="two">
      <template #title>
        <SvgIcon name="setting"/>参与者
      </template>
      <el-form :model="data.properties" label-position="left" label-width="80px">
        <el-form-item label="参与者" >
          <el-select v-model="data.properties.assignType" placeholder="人员/角色/部门">
            <el-option value="user" label="人员"/>
            <el-option value="role" label="角色"/>
            <el-option value="dept" label="部门负责人"/>
            <el-option value="post" label="岗位"/>
            <el-option value="creator" label="创建者"/>
          </el-select>
        </el-form-item>

        <el-form-item v-if="data.properties.assignType == 'user'" label="审批人" prop="properties">
          <el-select v-model="data.properties.assignValue" multiple placeholder="选择审批人">
            <el-option
                v-for="item in userOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="data.properties.assignType == 'dept'" label="审批部门" prop="properties">
          <el-select v-model="data.properties.assignValue" placeholder="选择审批部门">
            <el-option
                v-for="item in userOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="data.properties.assignType == 'role'" label="审批角色" prop="properties">
          <el-select v-model="data.properties.assignValue" placeholder="选择审批角色">
            <el-option
                v-for="item in userOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="data.properties.assignType == 'post'" label="岗位" prop="properties">
          <el-select v-model="data.properties.assignValue" placeholder="选择审批岗位">
            <el-option
                v-for="item in userOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="data.properties.assignType == 'creator'" label="创建者" prop="properties">
          <el-select v-model="data.properties.assignValue" placeholder="选择审批创建者相关">
            <el-option label="创建者" value="creator"/>
            <el-option label="创建者负责人" value="principal"/>
          </el-select>
        </el-form-item>
        <el-form-item label="审批类型">
          <el-select v-model="data.properties.slg" placeholder="抢任务/会签">
            <el-option value="single" label="或签"/>
            <el-option value="counterSign" label="会签"/>
          </el-select>
        </el-form-item>
      </el-form>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import {inject, onMounted, reactive, ref, watch} from 'vue'
import {ModelerContext, PropertiesPanelContext, PropertiesPanelData, usePropertiesPanelData} from '../../useapi';
  import Help from '../../../help/help.vue'
import './style.css';
import {getWidth} from "../util";

const data = usePropertiesPanelData()
/*
const ctx = inject<PropertiesPanelContext>('properties_panel_context') // 注入属性面板上下文

const modeler: ModelerContext = inject<any>('modeler_context')

const data = reactive<any>({
  text: '',
  properties: {},
})
*/


const userOptions = [
    {
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
    },
    {
      value: 'Option3',
      label: 'Option3',
    },
    {
      value: 'Option4',
      label: 'Option4',
    },
    {
      value: 'Option5',
      label: 'Option5',
    },
  ]

onMounted(() => {

})

</script>
